<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>学生信息管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
    <div id="app">
        <el-container>
            <el-header style="height: 60px;">学生信息管理系统</el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu default-active="1" class="el-menu-vertical-demo">
                        <el-menu-item index="1">
                            <i class="el-icon-eleme"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-collection"></i>
                            <span slot="title">课程管理</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-s-custom"></i>
                            <span slot="title">学生信息</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-user-solid"></i>
                            <span slot="title">讲师信息</span>
                        </el-menu-item>
                        <el-menu-item index="5">
                            <i class="el-icon-setting"></i>
                            <span slot="title">班级管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main>
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>首页</el-breadcrumb-item>
                            <el-breadcrumb-item>学生管理</el-breadcrumb-item>
                        </el-breadcrumb>
                        <!-- 查询栏 -->
                        <el-form :inline="true" style="margin: 20px;">
                            <el-row :gutter="20">
                                <el-col :span="10" type="text-align:left;">
                                    <el-form-item label="姓名：">
                                        <el-input v-model="inputSearch"></el-input>
                                </el-col>
                                <el-col :span="10">
                                    <el-button-group>
                                        <el-button type="primary" icon="el-icon-search"
                                            @click="queryStudents()">查询</el-button>
                                        <el-button type="primary" icon="el-icon-refresh"
                                            @click="getAllStudents()">重置</el-button>
                                        <el-button type="primary" icon="el-icon-circle-plus"
                                            @click="addStudent()">新增</el-button>
                                    </el-button-group>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary">上传<i
                                            class="el-icon-upload el-icon--right"></i></el-button>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary">下载<i
                                            class="el-icon-upload el-icon--right"></i></el-button>
                                </el-col>
                            </el-row>
                        </el-form>
                        <!-- 列表数据 -->
                        <el-table :data="pageStudents" style="width: 100%" height="500"
                            @selection-change="handleDelteStudents">
                            <el-table-column type="selection">
                            </el-table-column>
                            <el-table-column prop="sno" align="center" label="学号" width="80">
                            </el-table-column>
                            <el-table-column prop="name" align="center" label="姓名" width="120">
                            </el-table-column>
                            <el-table-column prop="gender" align="center" label="性别" width="80">
                            </el-table-column>
                            <el-table-column prop="birthday" align="center" label="出生日期" width="120">
                            </el-table-column>
                            <el-table-column prop="mobile" align="center" label="手机号" width="150">
                            </el-table-column>
                            <el-table-column prop="address" align="center" label="地址" width="300">
                            </el-table-column>
                            <el-table-column prop="email" align="center" label="邮箱" width="300">
                            </el-table-column>
                            <el-table-column align="center" label="操作" width="150">
                                <template slot-scope="scope">
                                    <el-button icon="el-icon-search" size="mini" @click="viewStudent(scope.row)"
                                        circle></el-button>
                                    <el-button type="primary" @click="editStudent(scope.row)" size="mini"
                                        icon="el-icon-edit" circle></el-button>
                                    <el-button type="danger" size="mini" @click="deleteStudent(scope.row)"
                                        icon="el-icon-delete" circle></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 底部页码栏 -->
                        <el-row>
                            <el-col :span="8" style="text-align: left;margin-top:15px;">
                                <el-button type="danger" size="mini" icon="el-icon-delete"
                                    @click="deleteStudents()">批量删除</el-button>
                            </el-col>
                            <el-col span="16" style="text-align: right;">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="currentpage" :page-sizes="[10, 20, 50, 100] " :page-size="pagesize"
                                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                                </el-pagination>
                            </el-col>
                        </el-row>
                        <!-- 弹出窗口 -->
                        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%"
                            close="closeDialogForm">
                            <el-form :inline="true" :rules="rules" ref="studentForm" :model="studentForm"
                                style="margin-left: 20px;" size="mini" label-width="110px" :label-position="right">
                                <el-upload class="avatar-uploader"
                                    :show-file-list="false" :disabled="inputView" :http-request="uploadPicturePost" style="text-align: center;">
                                    <img v-if="studentForm.image" :src="studentForm.imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon" style="text-align: center;"></i>
                                </el-upload>
                                <el-form-item label="学号" prop="sno">
                                    <el-input v-model="studentForm.sno" :disabled="inputViewSno"></el-input>
                                </el-form-item>
                                <el-form-item label="姓名" prop="name">
                                    <el-input v-model="studentForm.name" :disabled="inputView"></el-input>
                                </el-form-item>
                                <el-form-item label="性别" prop="gender">
                                    <el-select v-model="studentForm.gender" :disabled="inputView" placeholder="请选择性别">
                                        <el-option label="男" value="男"></el-option>
                                        <el-option label="女" value="女"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="出生日期" prop="birthday">
                                    <el-col :span="11">
                                        <el-date-picker v-model="studentForm.birthday" :disabled="inputView" type="date"
                                            value-format="yyyy-MM-dd" style="width: 210%;"
                                            placeholder="选择日期"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="手机号" prop="mobile">
                                    <el-input v-model="studentForm.mobile" :disabled="inputView"></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱" prop="email">
                                    <el-input v-model="studentForm.email" :disabled="inputView"></el-input>
                                </el-form-item>
                                <el-form-item label="家庭住址：" prop="address">
                                    <el-input v-model="studentForm.address" :disabled="inputView"></el-input>
                                </el-form-item>

                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button type="primary" v-show="!inputView"
                                    @click="submitStudentForm('studentForm')">确定</el-button>
                                <el-button @click="closeDialogForm('studentForm')">取消</el-button>
                            </span>
                        </el-dialog>
                    </el-main>
                    <el-footer style="height: 30px;">学生信息管理系统版权@Creedassin</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</body>

</html>
<script src="js/index.js"></script>